<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="<%=basePath %>css/cssreset.css">
        <link rel="stylesheet" href="<%=basePath %>css/style.css">
        <link rel="stylesheet" href="<%=basePath %>css/style2.css">
		<script src="<%=basePath %>js/jquery-1.11.1.min.js"></script>
		<script language="javascript" src="<%=basePath %>js/PCASClass.js"></script>
        <script>
		       $(function(){
			    	$(".shenpi").click(function(e){
			    		
			        e.preventDefault();
			        $('body').css("overflow","hidden");
			        $("#cover").css("display","block");
			        $("#cover").animate({
			            width: "100%",
			            height: "1800px",
			            top: "0",
			            left: "0"
			        },10);
			        
			    });
			    	$(".newht").click(function(e){
			        e.preventDefault();
			        $('body').css("overflow","hidden");
			        $("#cover4").css("display","block");
			        $("#cover4").animate({
			            width: "100%",
			            height: "1800px",
			            top: "0",
			            left: "0"
			        },10);
			        
			    });
			    $(".close").click(function(){
			        $("#cover4").removeAttr("style");
			        $("#cover-content3").removeAttr("style");
			    });
			    $(".mine").click(function(e){
			        e.preventDefault();
			        $('body').css("overflow","hidden");
			        $("#cover5").css("display","block");
			        $("#cover5").animate({
			            width: "100%",
			            height: "1800px",
			            top: "0",
			            left: "0"
			        },10);
			        
			    });
			    $(".close").click(function(){
			        $("#cover5").removeAttr("style");
			        $("#cover-content4").removeAttr("style");
			    });
			    
			    
			    $(".close").click(function(){
			        $("#cover").removeAttr("style");
			        $("#cover-content").removeAttr("style");
			    });
			    $('.check1').click(function(event) {
			    	 //$('.back').css('display', 'none'); 
			    	/* $('#smallig').css('display', 'none'); */
			    	$('.checkok').css('display', 'block');
			    	$('.del').css('display', 'block');
			    	$('.shift').css('display', 'block');
			    	$('.close2').css('display', 'block');
			    });
			    $('.close2').click(function(event) {
			    	$('.back').css('display', 'block');
			    	$('#smallig').css('display', 'block');
			    	$('.smalltitle p').css('display', 'block');
			    	$('.checkok').css('display', 'none');
			    	$('.del').css('display', 'none');
			    	$('.shift').css('display', 'none');
			    	$('.close2').css('display', 'none');
			    });
			});
		  </script> 
		  <script>
		  	function selectCheck(){
	    	   var judge = $("#selectCheck").val();
	    	   var objs = document.getElementsByName("items");
			   if(judge == 1){
				   for(var i = 0,l = objs.length;i < l;i++){
		    		   objs[i].checked = true;
		    	   }
				   $("#selectCheck").val(0);
	    	   }else{
	    		   for(var i = 0,l = objs.length;i < l;i++){
		    		   objs[i].checked = false;
		    	   }
	    		   $("#selectCheck").val(1);
	    	   }
	    	   
	    	   checkedShow();
	       }
		  	
		  	function checkedShow(){
		  		var str = "";
	    	    var number = 0;
	    	    var obj = document.getElementsByName("items");
				for(var i = 0,l = obj.length;i < l;i++){
					if(obj[i].checked){
						str += obj[i].value+",";
						number++;
					}
				}    	   
	    			
	    	    if(str == ""){
	    		   $(".yezi1").hide();
	    		   $('#fuzeren').css('display', 'block');
	    		   $('.smalltitle p').css('display', 'block');
	    		   
	    		  
	    	    }else{
	    	       $('.smalltitle p').css('display', 'none');
	    		   $(".staff_id").html(str);
	    		   $(".yezi1").show();
	    		   $("#number").html(number);
	    		   $('.back').css('display', 'none'); 
	    		  
	    	   }
		  	}
		  	 
		  </script>
    </head>
    <body>
    	<div class="bigbox2 bbigbox changebox">
    		<nav class="daohan">
    			<span class="scolor changeheight"></span>
    			<ul>
    				<li><a href="<%=basePath %>page/originalIndex.jsp"><p class="mline"><span class="smallicon"></span><span class="navtxt">首 页</span></p></a></li>
    				<li><a href="<%=basePath %>client/findByIndex.action"><p class="mline"><span class="smallicon one1" ></span><span class="navtxt" >客 户</span></p></a></li>
    				<li><a href="<%=basePath %>sale/findSale.action"><p class="mline"><span class="smallicon one2"></span><span class="navtxt">销 售 机 会</span></p></a></li>
    				<li><a href="<%=basePath %>contact/page.action"  id="sline"><p class="mline"><span class="smallicon one3" id="current21"></span><span class="navtxt" id="current2">联 系 人</span></p></a></li>
    				<li><a href="<%=basePath %>contract/findByAlls.action"><p class="mline"><span class="smallicon one4"></span><span class="navtxt">合 同</span></p></a></li>
    				<li ><a href="<%=basePath %>page/pacts.jsp"><p class="mline"><span class="smallicon one8"></span><span class="navtxt">合 同 审 批</span></p></a></li>
    				<c:if test="${sessionScope.backstage == 1}">
   						<li><a href="<%=basePath %>staff/selectTree.action"><p class="mline"><span class="smallicon one5"></span><span class="navtxt">后 台 管 理</span></p></a></li>
    				</c:if>
    			</ul>
    		</nav>
    		<div class="showbox2">
	    		<p class="title">联 系 人</p>
	    			<div class="aaa aaa2">
	    			<div class="smalltitle">
	 				<span class="back" id="fuzeren"><&nbsp;&nbsp;&nbsp;&nbsp;负责的联系人</span>
					 <p class="yezi">
					 	
						<a href="#" class="light3"><span class="imgmove"><img src="<%=basePath %>images/icon (14).png" alt=""></span>&nbsp;&nbsp;导出</a>
						 <a href="#" class="newht"><span class="imgmove imgmove2"><img src="<%=basePath %>images/icon (23).png" alt=""></span>&nbsp;&nbsp;新建联系人</a>
						 <a href="#" class="green"><span class="imgmove imgmove2"><img src="<%=basePath %>images/icon (16).png" alt=""></span>&nbsp;&nbsp;导入</a>
					 </p>
					 <span class="yezi1">
					 <a href="#" class="smallig" style="bottom:11px;"><img src="<%=basePath %>images/icon (20).png" alt=""></a>
					 <h4 class="checkok">已选择 <span style="color:#1fd4fb;" id = "number"> </span>项</h4>
					 <span class="del" onclick="deletecontact()"><img src="<%=basePath %>images/icon (17).png" alt="" style="position: absolute;bottom: 19px;left: -22px;">&nbsp;删除</span>
					  <span class="del shift mine" ><img src="<%=basePath %>images/icon (25).png" alt="" style="position: absolute;bottom: 18px;left: -29px;">&nbsp;转移</span>
	    				<span class="close2">
	    					<img src="<%=basePath %>images/icon (18).png" alt="">
	    				</span>
	    				</span>
	    				</div>
	    				<span class="blueline"></span>
	    				<div class="tab">
	    					<p class="tline">
	    						<span class="xuanze"><input type="checkbox" class="check1" id="selectCheck" value="1" onclick="selectCheck()"></span>
			    		            <span>联系人姓名</span>
			    		            <span class="cname">客户名称</span>
			    		            <span>职务</span>
			    		            <span class="cphone">电话</span>
			    		            <span class="cphone">手机</span>
			    		            <span class="cdate">电子邮箱</span>
			    		            <span class="cdate2">创建日期</span>
	    					</p>
    						<c:forEach items="${contactUtils}" var="contactUtil">
    							<p class="tline tline2">
		    						<span class="xuanze">
		    							<input type="checkbox" class="check1" value="${contactUtil.contact.contact_id}" name="items" onclick="checkedShow()">
		    						</span>
			    		            <a href="<%=basePath %>contact/findByIds.action?contact_id=${contactUtil.contact.contact_id}"><span>${contactUtil.contact.contact_name}</span></a>
			    		            <span class="cname">${contactUtil.client}</span>
			    		            <span>${contactUtil.contact.contact_job}</span>
			    		            <span class="cphone">${contactUtil.information}</span>
			    		            <span class="cphone">${contactUtil.contact.contact_cellphone}</span>
			    		            <span class="cdate">${contactUtil.contact.contact_email}</span>
			    		            <span class="cdate2"><fmt:formatDate value="${contactUtil.communal}" type="date"/></span>
		    					</p>
    						</c:forEach>
	    				</div>
	    				<div id="cover4">
				<div id="cover-bg3"></div>
				<div id="cover-content3">
				<h4>新 建 联 系 人<span class="close"></span></h4>
						<p class="main">
							<span class="leftmain">联系人类型</span>
							<span class="name" id="contact_type">默认业务类型</span>
						</p>
						<p class="main">
						<span class="leftmain">姓 名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
						<input type="text" id="contact_name" placeholder="&nbsp;&nbsp;请输入姓名 " class="shurukuang">
						</p>
						<p class="main">
							<span class="leftmain">客 户 名 称</span>
							<select id="clientID" class="shenfenselect shenfenselect3">
								<c:forEach items="${clients}" var="client">
									<option value="${client.client_id}">${client.client_name}</option>
								</c:forEach>
					        </select>
							</p>			
							<p class="main">
							<span class="leftmain">职 务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<input type="text" id="contact_job" placeholder="&nbsp;&nbsp;请输入职务 " class="shurukuang">
							</p>
							<p class="main">
							<span class="leftmain">电 话&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<input type="text" id="information_phone" placeholder="&nbsp;&nbsp;请输入电话 " class="shurukuang">
							</p>	
							<p class="main">
							<span class="leftmain">手 机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<input type="text" id="contact_cellphone" placeholder="&nbsp;&nbsp;请输入手机 " class="shurukuang">
							</p>
							<p class="main">
								<span class="leftmain">电 子 邮 箱</span>
								<input type="text" id="contact_email" placeholder="&nbsp;&nbsp;请输入电子邮箱 " class="shurukuang">
							</p>
							<p class="main" style="z-index:-1">
								<span class="leftmain">省 份&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									<select id="sheng" name="province3" class="shenfenselect shenfenselect4">
							        </select>
							        <select id="shi" name="city3" class="shenfenselect shenfenselect2 shenfenselect4">
							        </select>
							        <select id="xiang" name="area3" class="shenfenselect shenfenselect2 shenfenselect4">
							        </select>
							</p>
							<p class="main">
							<span class="leftmain">地 址&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<input type="text" id="information_address"  placeholder="&nbsp;&nbsp;请输入地址 " class="shurukuang">
							</p>
							<p class="main">
							<span class="leftmain">备 注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<input type="text" id="contact_remarks" placeholder="&nbsp;&nbsp;请输入备注 " class="shurukuang">
							<p class="main">
				    			<span class="leftmain">联系人所有人</span>						
				    			<span class="xsicon"><img src="<%=basePath %>images/head.png" alt="" class="kkk" style="left: -22px;">&nbsp;</span>
				    			<span class="name namee">${staff.staff_name }</span>
				    		</p>
							<p class="main" style="height:40px;">
								<span class="leftmain" style="position:relative;bottom:0px;">所 属 部 门</span>
								<span class="name namee" style="position:relative;bottom:0px;left:65px;">${department.department_name}</span>
							</p>
							<p class="main">
								<span class="leftmain">微 博&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
								<input type="text" id="information_microblog" placeholder="&nbsp;&nbsp;请输入微博 " class="shurukuang">
							</p>
							<p class="main">
									<span class="leftmain">邮 政 编 码</span>
									<input type="text" id="information_postalcode" placeholder="&nbsp;&nbsp;请输入邮政编码 " class="shurukuang" style="margin-left:30px;">
							</p>			
							<p class="main">
							<span class="leftmain">性 别&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<select id="contact_sex" class="shenfenselect shenfenselect3">
									            <option value="男">男</option>
									            <option value="男">女</option>
							</select>
							</p>			
							<p class="main">
							<span class="leftmain">出 生 日 期</span>
							<input type="text" id="contact_birthday" class="shurukuang Wdate" style="height: 30px;1px solid #bfbfbf;" placeholder="&nbsp;&nbsp;请输入出生日期 "  onfocus="WdatePicker({skin:'whyGreen',dateFmt: 'yyyy-MM-dd', readOnly:true})">
						
							</p>			
							<p class="main">
								<button class="btn1 btn2" onclick="saveContact()">保存</button>
								<button class="btn1 btn3">取消</button>
							</p>
						</div>
						</div>
						
						<div id="cover5">
						<div id="cover-bg4"></div>
						<form action="" id="cover-content4">
								<h4>转 移 联 系 人<span class="close"></span></h4>
								<p class="main">是否将选中的联系人转移给其他负责人？转移成功之后，该操作将无法恢复。</p>
								<p class="main">
									<span class="leftmain">转 交 人 名 称</span>
									<select id=staffId class="shenfenselect shenfenselect3">
							            <option>&nbsp;请选择转交人</option>
							            <c:forEach items="${staffList}" var="staff">
							            	<option value="${staff.staff_id}">${staff.staff_name}</option>
							            </c:forEach>
							        </select>
								</p>
								<p class="main">
									
									<button class="btn1 btn2" onclick="updateStaffId()">保存</button>
									<button class="btn1 btn3">取消</button>
								</p>
						</form>
						</div>
					 </div>
	    		</div>
	    	</div>
	    </div>
    	<p class="staff_id" style="display: none"></p>
    	<script src="${pageContext.request.contextPath}/salejihui/My97DatePicker/WdatePicker.js"></script>
    </body>
    <script type="text/javascript">
    	function deletecontact(){
    		var staff_id = $(".staff_id").html();
    	  	staff_id = staff_id.substring(0,staff_id.length-1);
    	  	$.ajax({
				type:"post",
				url:"<%=basePath %>contact/deleteManyId.action",
				data:"id="+staff_id,
				success:function(data){
					alert(data);
					location.href="<%=basePath %>contact/page.action";
				},
				error:function(e){
					alert("发生未知错误请刷新页面");
				}

	   		 });
    	}
    	
    	function saveContact(){
    		var clientID = $("#clientID").val();
    		if(clientID == "" || clientID == null){
    			alert("无所对应的客户，不能新增联系人！");
    			return;
    		}
    		var contact_type = "默认业务类型";
        	var saleI = $("#saleId").val();
        	var contact_name = $("#contact_name").val();
        	var contact_job = $("#contact_job").val();
        	var contact_cellphone = $("#contact_cellphone").val();
        	var contact_email = $("#contact_email").val();
        	var contact_sex = $("#contact_sex").val();
        	var contact_birthday = $("#contact_birthday").val();
        	var contact_remarks= $("#contact_remarks").html();
        	
        	var information_address = $("#information_address").val();
        	var information_phone = $("#information_phone").val();
        	
        	var sheng = $("#sheng option:selected").val();
	    	var shi = $("#shi option:selected").val();
	    	var xiang = $("#xiang option:selected").val();
	    	var information_province = null;
	    	var information_city = null;
	    	var information_area = null;
	    	if(sheng != ""){
	    		information_province = sheng;
	    		information_city = shi;
		    	information_area = xiang;
	    	}
        	var information_postalcode = $("#information_postalcode").val();
        	var information_microblog = $("#information_microblog").val();
        	
        	var usdata = {contact_type:contact_type,saleI:saleI,contact_name:contact_name,information_area:information_area,
        			contact_job:contact_job,contact_cellphone:contact_cellphone,contact_email:contact_email,
        			contact_sex:contact_sex,contact_birthday:contact_birthday,contact_remarks:contact_remarks,
        			information_address:information_address,information_phone:information_phone,information_postalcode:information_postalcode,
        			information_microblog:information_microblog,clientID:clientID,information_province:information_province,information_city:information_city};
        	$.ajax({
    			type:"post",
    			url:"<%=basePath %>contact/save.action",
    			data:usdata,
    			success:function(data){
    				alert(data);
    				if(data == "新增成功"){
    					location.href="<%=basePath %>contact/page.action";
    				}
    			},
    			error:function(e){
    				alert("发生未知错误请刷新页面");
    			}
       		 });
    	}
    	function updateStaffId(){
    		var contact_id = $(".staff_id").html();
    		contact_id = contact_id.substring(0,contact_id.length-1);
    		var staffId = $("#staffId option:selected").val();
    		if(staffId != "" && contact_id != ""){
	    		$.ajax({
					type:"post",
					url:"<%=basePath %>contact/updates.action",
					data:"contact_id="+contact_id+"&staff_id="+staffId,
					success:function(data){
						alert(data);
						location.href="<%=basePath %>contact/page.action";
					},
					error:function(e){
						alert("发生未知错误请刷新页面");
					}
	
		   		 });
    		}else{
    			alert("发生未知错误，即将刷新页面");
    		}
    	}
    </script>
    <script language="javascript" defer>
		
		new PCAS("province3","city3","area3");
		
	</script>
</html>